<template>
  <div class="api-usage-example">
    <h3>API 使用示例</h3>
    
    <!-- 系统统计数据示例 -->
    <div class="example-section">
      <h4>系统统计数据</h4>
      <button @click="loadStats" :disabled="loading">
        {{ loading ? '加载中...' : '获取统计数据' }}
      </button>
      
      <div v-if="stats" class="data-display">
        <p>在线瓷砖数: {{ stats.onlineTiles.value }}{{ stats.onlineTiles.unit }}</p>
        <p>异常信号: {{ stats.abnormalSignals.value }}{{ stats.abnormalSignals.unit }}</p>
        <p>平均压力值: {{ stats.averagePressure.value }}{{ stats.averagePressure.unit }}</p>
      </div>
      
      <div v-if="error" class="error-message">
        错误: {{ error }}
      </div>
    </div>
    
    <!-- 热图数据示例 -->
    <div class="example-section">
      <h4>热图数据</h4>
      <select v-model="selectedArea" @change="loadHeatmap">
        <option value="all">全部区域</option>
        <option value="A">区域A</option>
        <option value="B">区域B</option>
        <option value="C">区域C</option>
      </select>
      
      <div v-if="heatmapData.length > 0" class="data-display">
        <p>热图数据点数量: {{ heatmapData.flat().length }}</p>
        <p>异常点数量: {{ heatmapData.flat().filter(point => point.level === 'critical').length }}</p>
      </div>
    </div>
  </div>
</template>

<script>
import smartTileApi from '../../api/smartTileApi.js'

export default {
  name: 'ApiUsageExample',
  data() {
    return {
      loading: false,
      error: null,
      stats: null,
      heatmapData: [],
      selectedArea: 'all'
    }
  },
  methods: {
    async loadStats() {
      this.loading = true
      this.error = null
      
      try {
        const response = await smartTileApi.getSystemStats()
        if (response.success) {
          this.stats = response.data
        } else {
          this.error = '获取数据失败'
        }
      } catch (err) {
        this.error = err.message || '网络错误'
      } finally {
        this.loading = false
      }
    },
    
    async loadHeatmap() {
      try {
        const response = await smartTileApi.getHeatmapData({
          area: this.selectedArea
        })
        if (response.success) {
          this.heatmapData = response.data.heatmap
        }
      } catch (err) {
        console.error('加载热图数据失败:', err)
      }
    }
  },
  
  mounted() {
    // 组件挂载时自动加载数据
    this.loadStats()
    this.loadHeatmap()
  }
}
</script>

<style scoped>
.api-usage-example {
  padding: 20px;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  margin: 20px 0;
}

.example-section {
  margin-bottom: 20px;
  padding: 16px;
  background: #f9fafb;
  border-radius: 6px;
}

.example-section h4 {
  margin: 0 0 12px 0;
  color: #374151;
}

.data-display {
  margin-top: 12px;
  padding: 12px;
  background: white;
  border-radius: 4px;
  border: 1px solid #e5e7eb;
}

.data-display p {
  margin: 4px 0;
  color: #6b7280;
}

.error-message {
  margin-top: 12px;
  padding: 8px 12px;
  background: #fef2f2;
  color: #dc2626;
  border-radius: 4px;
  border: 1px solid #fecaca;
}

button {
  background: #3b82f6;
  color: white;
  border: none;
  padding: 8px 16px;
  border-radius: 4px;
  cursor: pointer;
  transition: background-color 0.2s;
}

button:hover:not(:disabled) {
  background: #2563eb;
}

button:disabled {
  background: #9ca3af;
  cursor: not-allowed;
}

select {
  padding: 6px 12px;
  border: 1px solid #d1d5db;
  border-radius: 4px;
  background: white;
}
</style>
